<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jquery插件轮播</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #wrapper {
      margin: 50px auto;
      width: 1000px;
      height: 430px;
      position: relative;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <!-- 1100 -->
  <div id="wrapper"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <script>
    var imgs = [
      './static/imgs/1.jpg',
      './static/imgs/2.jpg',
      './static/imgs/3.jpg',
      './static/imgs/4.jpeg',
      './static/imgs/5.jpg',
      './static/imgs/6.jpeg'
    ];

    $.fn.extend({
      mySlide: function (imgs, icon, options) {
        if (options && options.width && options.distanch) {
          throw Error('there can only be distanch and width');
        }
        var _that = this;
        // 容器的宽
        var wWidth = this.width();
        // 容器的高
        var wHeight = this.height();
        // 传入的图片数组的长度
        var len = imgs.length;
        // 图片间隙
        var distanch = null;
        // 图片宽度
        var width = null;
        // 轮播时间间隔
        var time = (options && options.time) || 3000;
        // 每张图片划过的时间 
        var itemTime = (options && options.itemTime) || 600;
        // 传了 宽度 
        if (options && options.width) {
          width = options.width;
          if (width >= wWidth) {
            throw Error('the width must not 大于 容器宽度');
          }
          distanch = (wWidth - width) / (len - 1);
        }
        // 传了 间隙
        if (options && options.distanch) {
          distanch = options.distanch;
          width = wWidth - (len - 1) * distanch;
        }
        // 宽和间隙都没传
        if (!options || (!options.width && !options.distanch)) {
          width = wWidth * 0.65;
          distanch = (wWidth - width) / (len - 1);
        }

        var imgIndex = 0;
        var mouseIndex = 0;
        var timer = null;
        // 根据传入的图片数组 生成图片容器 及布局
        function creDom() {
          $.each(imgs, function (index, item) {
            var oDiv = $('<div></div>');
            var $Icon = null;
            if(icon) {
              $Icon = $('<div></div>');
              $Icon.css({
                width: distanch * 0.9,
                height: distanch,
                position: 'absolute',
                top: distanch,
                left: distanch * 0.1,
                backgroundImage: 'url('+ icon +')',
                backgroundSize: '90%',
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'top center',
                backgroundColor: '#eaeaea',
                display: index === 0 ? 'none' : 'block'
              })
            }
            oDiv.css({
              width: width,
              height: wHeight,
              position: 'absolute',
              left: index > 0 ? (index - 1) * distanch + width : 0,
              backgroundImage: 'url(' + item + ')',
              backgroundSize: '100% 100%'
            });
            oDiv.append($Icon);
            _that.append(oDiv);
          });
        }
        creDom();
        function mouseSlid() {
          if (mouseIndex > imgIndex) {
            for (var i = imgIndex + 1; i <= mouseIndex; i++) {
              _that.children().eq(i).stop().animate({ left: distanch * i + 'px' }, itemTime);
            }
            imgIndex = mouseIndex;
          } else {
            for (var i = imgIndex; i > mouseIndex; i--) {
              _that.children().eq(i).stop().animate({ left: wWidth - (len - i) * distanch });
            }
          }
          imgIndex = mouseIndex;
          _that.children().eq(imgIndex).children().css({display: 'none'});
          _that.children().eq(imgIndex).siblings().children().css({display: 'block'});
        }
        timer = setInterval(function () {
          if (mouseIndex === len - 1) {
            mouseIndex = 0
          } else {
            mouseIndex++
          }
          mouseSlid();
        }, time)
        this.children().hover(function () {
          clearInterval(timer);
          mouseIndex = $(this).index();
          mouseSlid();
        }, function () {
          timer = setInterval(function () {
            if (mouseIndex === len - 1) {
              mouseIndex = 0
            } else {
              mouseIndex++
            }
            mouseSlid();
          }, time)
        });
      }
    });
    $('#wrapper').mySlide(imgs, './static/num.svg');

  </script>
</body>

</html>